---
image: /generated/articles-docs-transitions-presentations-cube.png
crumb: "@remotion/transitions - Presentations"
title: "cube()"
---

:::note
This is a paid item which you can [buy here](https://remotion.pro/cube-transition).
:::

A presentation where both the entering and exiting scene rotate with 3D perspective.

<Demo type="cube" />

## Example

```tsx twoslash title="CubeTransition.tsx"
import { AbsoluteFill } from "remotion";

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({ children, color }) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: "center",
        alignItems: "center",
        fontSize: 200,
        color: "white",
      }}
    >
      {children}
    </AbsoluteFill>
  );
};
// ---cut---
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { cube } from "@remotion-dev/cube-presentation";

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={cube({ direction: "from-left" })}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
```

## API

The `cube()` function does take an object with the following properties:

### `direction`

One of `from-left`, `from-right`, `from-top`, `from-bottom`.

```tsx twoslash
import { CubeDirection } from "@remotion-dev/cube-presentation";

const flipDirection: CubeDirection = "from-left";
```

### `perspective?`

The CSS `perspective` of the flip animation. Defaults to `1000`.

## See also

- [Presentations](/docs/transitions/presentations)
